<template>
    <div style="height: 100vh;z-index: 1;position: relative;background-color:#FFFFFF;">
        <div class="goback">
            <div @click="goback" >返回</div>
            <div style="color: #00aaff">购物车</div>
            <div @click="removeHandle" style="margin-right:5vw;color: #000000 ">清空</div>
        </div>
        <div style="overflow-y: auto;height: 84vh;display: flex;flex-direction: column;align-items: center">
<!--            <img src="../../assets/img/shop/empty.png" alt="">-->
            <div class="shop-cart" style="" v-for="(item,index) in noPay">
                <div>
                    <img src="../../assets/img/restaurant/tupian.png" alt="">
                    <div class="cart-info">
                        <div>
                            <span>{{item.name}}</span>
                        </div>
                        <div>
                            <span>¥{{(item.price).toFixed(2)}}</span>
                            <span style="margin-right: 2vw">数量：{{item.quantity}}</span>
                        </div>
                    </div>
                </div>
                <div class="cart-cal">
                    <div class="a1">
                        合计：<span><small>¥</small>{{(item.price*item.quantity).toFixed(2)}}</span>
                    </div>
                    <div @click="payOne(index)" class="a2">
                        去结算
                    </div>
                </div>
            </div>
        </div>

        <div class="shop-sum">
            <div class="a1">
                合计：<span>¥{{totalPrice.toFixed(2)}}</span>
            </div>
            <div @click="payAll" class="a2">
                一键结算
            </div>
        </div>
<!--        {{this.$store.getters.items}}-->
    </div>


</template>

<script>
    import {mapGetters,mapMutations,mapActions} from 'vuex'

    export default {
        name: "index",
        data(){
            return{
                Withdrawals:false
            }
        },
        computed:{
            totalPrice() {
                let shopingCart=this.$store.getters.items
                let totalPrice=0
                for(let item of shopingCart){
                    if(!item.isPay) totalPrice+=item.price*item.quantity
                    else totalPrice+=0
                }
                return totalPrice;
            },
            noPay(){
                return this.$store.getters.items.filter((product)=>{
                    return product.isPay===false
                    }
                )
            },
            ...mapGetters['items']
        },
        methods:{
            goback(){
                this.$router.go(-1)
            },
            shuchu(){
              console.log(this.calculateShoppingPrice)
            },
            payOne(index){
                // console.log(index)
                let shopingCart=this.$store.getters.items
                // console.log(shopingCart[index])
                this.payShoppingPrice(shopingCart[index])
                // console.log(shopingCart[index])
            },
            payAll(){
                let shopingCart=this.$store.getters.items
                shopingCart.forEach((e)=>{
                    e.isPay=true
                })
            },
            removeHandle(){
                this.removeItemAll()
            },
            ...mapMutations({
                payShoppingPrice :'PAY_SHOPPING_PRICE',
                payShoppingPriceAll:'PAY_SHOPPING_PRICE_ALL'
            }),

            ...mapActions([
                'removeItemAll'
            ])
        },
    }

</script>

<style scoped>
    .goback{
        width: 96vw;
        height: 6vh;
        line-height: 6vh;
        font-size: 20px;
        font-weight: bold;
        padding-left: 4vw;
        background-color: #eeeeee;
        color: #aaaaaa;
        display: flex;
        justify-content: space-between;
    }
    .shop-cart{
        display: flex;
        flex-direction: column;
        width: 88vw;

        padding:1vh 2vw;
        margin: 1vh 0;

        background-color: #fcfcfc;
    }
    .shop-cart>div{
        flex: 1;
        display: flex;
    }
    .shop-cart>div:nth-child(1){
        border-bottom: 0.2px solid #eeeeee;
    }
    .shop-cart>div>img{
        width: 18vw;
        height: 18vw;
        margin: 1vh 1vw 2vh 1vw;
    }
    .cart-info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 60vw;
    }
    .cart-info>div:nth-child(1){
        display: inline;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        margin-top: 2vh;
        font-size: 14px;
        font-weight: 600;
    }
    .cart-info>div:nth-child(2){
        display: flex;
        justify-content: space-between;

        margin-bottom: 2vh;
        font-size: 14px;
        font-weight: 600;
    }
    .cart-cal{
        display: flex;
        justify-content: space-between;
    }
    .cart-cal>div{
        margin-top: 2vh;
        line-height: 6vh;
    }
    .a1{
        margin-left: 4vw;
    }
    .a1>span{
        color: #ff5339;
    }
    .a2{
        width: 30vw;
        height: 6vh;
        text-align: center;
        line-height: 6vh;
        background-color: #20c3fe;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 600;
        border-radius: 25px;
    }
    .shop-sum{
        height: 10vh;
        background-color: #f5f5f5;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>